<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
$(function() {
		// $( "#tabs" ).tabs();
	});

    $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });

                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); },
                    function() { $(this).removeClass('ui-state-hover'); }
                );

            });
   //on change select grupos
function mostrarpc(combo1, combo2){
	combo2 = document.getElementById(combo2);
	Limpiarlistapc(combo2);
	if(combo1.options[combo1.selectedIndex].value != ""){
            $("#bar_ajax").show();
            $("#pcs").hide();
		$.ajax({
			type: 'post',
			url: '<?php echo url_for('ajax_llenar_combopcs') ?>',
			data: "idgrupo="+$("#grupowork").val(),
			success: function(data){
                            $("#pcs").html(data);

			},complete: function(){
                                        $("#bar_ajax").hide(0,function(){
                                            $("#pcs").show();
                                        });


                                    }
		});
	}
}

function Limpiarlistapc(combo){
	while(combo.length > 0){
		combo.remove(combo.length-1);
	}
}
// ver la configuracion por cada pc elegida



// historial
function mostrarhistorial(){
  
      $.ajax({
                  //
          type: 'post',
          url: '<?php echo url_for('@ajax_view_historial') ?>',
          data: "idusuario_pc="+$("#pcs_select").val(),
          success: function(data){
                                $("#graficos_monitoreo").html(data);
          },
          complete: function(){
                        
                                 $("#graficos_monitoreo").show();
                            
                    }

      });

}

function show_result_monitoreo(){
                          
                          $.ajax({
                                    type: 'post',
                                    url: '<?php echo url_for('ajax_resultados_monitoreo') ?>',
                                    data: "idusuario_pc="+$("#pcs_select").val(),
                                    success: function(data){
                                        $("#vista_detalle").html(data);
                                    },
                                    complete: function(){
                                        $("#load_ajax_2").hide(0,function(){
                                            $("#vista_detalle").show();
                                        });
                                        

                                    }
                            });
}

function mostrarimages(variable){
    
     $.ajax({
                  //
          type: 'post',
          url: '<?php echo url_for('@ajax_show_images') ?>',
          data: "idusuario_pc="+$("#pcs_select").val(),
          success: function(data){
                                $("#graficos_monitoreo").html(data);
          },
          complete: function(){
                        
                                 $("#graficos_monitoreo").show();
                            
                    }

      });


}

// grafico de torta
google.load("visualization", "1", {packages:["corechart"]});

  //torta vista inicial
  function drawChartTorta(data) {
        var chart = new google.visualization.PieChart(document.getElementById('chart_div_torta'));
        chart.draw(data, {width: 290, height: 270, title: 'Programas Utilizados'});
   }
   //torta busqueda fechas
    function drawChart1(data) {
        var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
        chart.draw(data, {width: 600, height: 350, title: 'Programas Utilizados'});
   }
  // GRAFICO
 //  google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChartTorta);
      function drawChart2(data) {
       
       var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
        chart.draw(data, {width: 600, height: 240, title: 'Company Performance',
                          hAxis: {title: 'Year', titleTextStyle: {color: '#FF0000'}}
                         });
      }

    </script>

<div style="width: 880px; height: 762px;  margin: 0px auto;">

     <div style="width: 879px; height: 40px; border: solid red 1px; ">
         <div style="float:left;">
        <h1 style="margin: 0px;">Comande</h1>
         </div>
         <div style="float:right;">
             <a class="fancyBox" href="#fancyRegistrogrupos">Agregar Grupos</a>
         </div>
    </div>
    <div style="width: 879px; height: 720px; ">
 <div  style="width: 260px; height: 638px; border: solid red 1px;float: left; ">
<table>
    <tr>
        <td>
            Grupos de Trabajo:
        </td><td>
            <div id="gru_index">
          <?php if($lista_grupos != null) :?>

            <select id="grupowork" name="grupowork" onchange="mostrarpc(this, 'pcs');">
                <option SELECTED>Seleccione  </option>
                <?php foreach($lista_grupos as $grup): ?>
                <option value="<?php echo $grup->getId(); ?>"><?php echo $grup->getNombreGrupo();?></option>
                <?php endforeach; ?>
             </select>
<?php else: ?>
            <label>No se hay grupos</label>

    <?php endif; ?>
             </div>
        </td>
    </tr>
</table>
     <div style="width: 250px; height: 265px; border: solid red 1px;float: left; padding-left:10px;">
         <strong>Pcs :</strong><br>
         <div id="pcs">
         <select id="pcs_select" size="11" name="pcs_select" onchange="mostrar_configuracion_pc();">
         <option value="0">Elija un Grupo de Trabajo</option>
         </select>
         </div>
         <div style="display:none;" id="bar_ajax">
            <?php echo image_tag('ajax-loader-bar.gif')  ?>
         </div>
         <a class="fancyBox" href="#fancyRegistropc">Regístrar PC</a>
     </div>
<div  style="width: 250px; height: 325px; float: left; padding-left:0px;">
    <div id ="configuracion_monitoreo">

</div>
    <div id="config_ajax_barra" style="display: none; width: 250px; height: 300px; padding: 50px 10px;">
<?php echo image_tag('ajax-loader-bar.gif')  ?>
    </div>

     </div>

    </div>
<div  id="base" style="width: 610px; height: 715px; float: left;">
    <div id="vista_general" style="display: none;width: 545px; height: 635px; float: left;" >
         <h3>Vista de Monitoreo de Pcs</h3>
         <div style="float: right; margin-top: -42px;">Tiempo de Consulta :
         <select>
             <option>Hoy</option>
             <option>Ayer</option>
             <option>Ultima semana</option>
             <option>hace 1 Mes</option>
         </select> </div>
         <strong>
             Vista General Grupo 01
         </strong>
         <div style="float:right ">
             <h3>11-08-2011</h3>
         </div>
         <div>
            Horas Promedio Conectadas : 8 Horas<br>
            Promedio Desconectado     : 1.50 Horas
         </div>
         <div style="width: 480px; height: 230px; margin: 10px auto;">
             <h1 style="margin: 100px 170px;">Grafico 1</h1>
         </div>
         <div style="width: 480px; height: 230px; margin: 10px auto;">
             <h1 style="margin: 100px 170px;">Grafico 2</h1>
         </div>
         
    </div>

    <div id="vista_detalle" style="display: block;">
        Seleccione un Grupo y Luego un Usuario para mostrar los datos de monitoreo

    </div>
    <div id="load_ajax_2" style="display: none;width: 545px; height: 635px;  float: left; margin:0px auto; padding: 200px 250px;">

        <?php echo image_tag('ajax-loader.gif') ?>

    </div>
    </div>
   


</div>
</div>

